<template>
  <el-dialog
    :model-value="modelValue"
    title="消费信息"
    width="1000"
    destroy-on-close
    @update:model-value="$emit('update:modelValue', $event)"
  >
    <div class="container">
      <div v-for="item in renderData" :key="item.key" class="form-item">
        <span class="form-item-label">{{ item.label }}</span>
        <div class="form-item-content" :style="customStyle(item)">
          {{ item.value }}
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="$emit('update:modelValue', false)">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, toRaw, computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  operationRow: {
    type: Object,
    required: true
  }
})
const emit = defineEmits(['update:modelValue'])

const handleConfirm = () => {
  emit('update:modelValue', false) // 关闭弹窗
}

const renderMap = {
  consumer: '姓名',
  type: '本次操作类型',
  rechargeAmount: '充值金额',
  spend: '消费金额',
  target: '宠物信息',
  remark: '备注信息',
  beforeBalance: '本次操作前余额',
  balance: '本次操作后余额',
  date: '操作时间'
}

const renderData = computed(() => {
  return Object.keys(renderMap).map((key) => {
    return {
      label: renderMap[key],
      key,
      value: props.operationRow[key]
    }
  })
})

const customStyle = ({ key }) => {
  if (key === 'rechargeAmount') {
    return { color: '#67C23A', fontWeight: 'bold' }
  }
  if (key === 'spend') {
    return { color: '#F56C6C', fontWeight: 'bold' }
  }
  if (key === 'beforeBalance') {
    return { color: '#8a1874', fontWeight: 'bold' }
  }
  if (key === 'balance') {
    return { color: '#409EFF', fontWeight: 'bold' }
  }
  return {}
}
</script>

<style lang="scss" scoped>
.container {
  width: 800px;
  .form-item {
    width: 600px;
    display: flex;
    margin-top: 24px;
    align-items: center;
    &-label {
      width: 150px;
      // font-size: 18px;
    }
    &-content {
      flex: 1;
      ::v-deep(.el-input-number) {
        .el-input__wrapper {
          .el-input__inner {
            text-align: left;
          }
        }
      }
    }
  }
  .pet-item {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-top: 24px;
    &-row {
      display: flex;
      align-items: center;
      &-label {
        width: 80px;
      }
    }
  }
}
</style>
